<template>
    
    <div class="weui-cells__title">选择时间段</div>
     <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="selectStartTime()">
            <div class="weui-cell__bd">
                <p>开始时间</p>
            </div>
            <div class="weui-cell__ft">{{work_week.start_date}}</div> 
        </a>
        <a class="weui-cell weui-cell_access" href="javascript:;" @click="selectEndTime()">
            <div class="weui-cell__bd">
                <p>结束时间</p>
            </div>
            <div class="weui-cell__ft">{{work_week.end_date}}</div>
        </a>
    </div>
    <div class="weui-cells__title">选择该时间段内每周的工作日</div>
    <div class="weui-cells weui-cells_checkbox">
        <label class="weui-cell weui-check__label" for="Monday">
            <div class="weui-cell__hd">
                <input type="checkbox" class="weui-check" name="checkbox1" id="Monday" value='1' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周一</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="Tuesday">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="Tuesday" value='2' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周二</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="Wednesday">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="Wednesday" value='3' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周三</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="Thursday">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="Thursday" value='4' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周四</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="Friday">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="Friday" value='5' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周五</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="Saturday">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="Saturday" value='6' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周六</p>
            </div>
        </label>
        <label class="weui-cell weui-check__label" for="Sunday">
            <div class="weui-cell__hd">
                <input type="checkbox" name="checkbox1" class="weui-check" id="Sunday" value='7' v-model="work_week.week">
                <i class="weui-icon-checked"></i>
            </div>
            <div class="weui-cell__bd">
                <p>周日</p>
            </div>
        </label>
    </div>
    <!--  <div class="btn-wrap" @click="submit">
        <a href="javascript:;" class="weui-btn weui-btn_primary">提交</a>
    </div>
 -->
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import commonPage from 'clientApi/commonPage.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import cache from 'gapi/cache.js'

    /**
     *  组件实例对象
     */
    export default {
        components: {
            
        },
        data: function(){
            return{
                work_week:{
                    start_date:'',
                    end_date:'',
                    week:[]
                }
            }
        },
        computed:{
           
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                // alert(cache.setMemoryCache)
                cache.getMemoryCache('workWeek', (data) => {
                    if(data.week){
                        this.work_week = data
                    }
                }) 
            },
            selectStartTime(){
                var self = this;
                let date = new Date()
                let currentDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                let maxDate = this.work_week.end_date?this.work_week.end_date:'3000-12-12'
                console.log(maxDate)
                KCApiApp.showDatePicker(
                        currentDate,//  最小时间
                        maxDate,//  最大时间
                        self.work_week.start_date, //默认时间
                        (data)=>{    
                            self.work_week.start_date = data.SelectedDate
                        })
            },
            selectEndTime(){
                var self = this;
                let date = new Date()
                let currentDate = this.work_week.start_date
                let maxDate = (date.getFullYear()+1)+"-"+(date.getMonth()+1)+"-"+date.getDate()
                KCApiApp.showDatePicker(
                        currentDate,//  最小时间
                        maxDate,//  最大时间
                        this.work_week.end_date, //默认时间
                        (data)=>{                  //回调方法
                            this.work_week.end_date = data.SelectedDate
                        })
            },
            submit(){
                if(this.work_week.start_date&&this.work_week.end_date&&this.work_week.week.length){
                    commonPage.goBack(1,{'key':'workWeek','value':this.work_week})
                }else{
                     widget.toast('请设置日期和工作日')
                }
                
            }
        },
        created(){
            
            this.init();
             /**
             * 设置 添加考勤任务按钮
             * @type {String}
             */
            commonPage.updateTitleBar({
                backAction: '',
                leftDisplay:  false,
                leftText: '',
                leftAction: '',
                rightDisplay: true,
                rightText: '提交',
                rightAction: 'doSubmit'
            })

            window.doSubmit = this.submit
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
